import $ from "jquery";
import "./scss/banner.scss";
class Banner{
    constructor(id=false,options={}){
        let tmp_config ={
            auto:true,//是否自动播放
            time:5000,//轮播时间
            animate:'fade' //left:左右滑动，fade：渐变
        }
        this.config = Object.assign(tmp_config,options);
        //获取轮播容器
        this.bannerContainer = $(id?id:"#yfbanner");
        // 初始化成员属性
        this.index =0;//当前要显示
        this.preindex = -1; //上一张图片，要隐藏的图片
        
        // 初始化轮播图
        this.init();
    }
    //初始化方法
    init(){
        //添加轮播样式
        this.bannerContainer.addClass("yfbanner");
        // 获取轮播图数量，获取轮播图集合
        this.banners = this.bannerContainer.find('.items').children(".item");
        //创建控制点
        this.createDot();
        // 显示图片
        this.show();
        // 容器高度自动适应
        $(window).resize(()=>{
            this.setHeight();
        });
        // 自动轮播
        if(this.config.auto){
            this.autoplay();
        }
    }
    //创建控制点
    createDot(){
        let navcontainer = document.createElement("div");
        this.bannernav = $(navcontainer);
        this.bannernav.addClass("bannernav");
        let dotstr ="";
        for (let index = 0; index < this.banners.length; index++) {
            dotstr = dotstr+"<span></span>"
        }
        navcontainer.innerHTML = dotstr;
        this.bannerContainer.append(navcontainer);
        // 为控制点添加点击事件
        let that = this;
        this.bannernav.find("span").on('click',function(){
            that.preindex= that.index;
            that.index = $(this).index();
            that.show();
        });
    }
    // 显示轮播图
    show(){
        switch (this.config.animate) {
            case "left":
                this.banners.eq(this.preindex).animate({left:-this.banners.eq(this.preindex).width()});
                this.banners.eq(this.index).css("left",this.banners.eq(this.index).width()).show().animate({left:0});
                break;
            default:
                this.banners.eq(this.preindex).fadeOut();
                this.banners.eq(this.index).fadeIn();
                break;
        }
        // 重置控制点样式
        this.bannernav.find("span").eq(this.preindex).removeClass("active");
        this.bannernav.find("span").eq(this.index).addClass("active");
        // 设置容器高度
        this.setHeight();
    }
    // 设置容器高度
    setHeight(){
      this.bannerContainer.height(this.banners.eq(this.index).height());
    }
    // 自动播放轮播图
    autoplay(){
        let that = this;
        setInterval(function(){
            if(that.index === that.banners.length-1){
                that.preindex = that.banners.length-1;
                that.index=0;
            }else{
                that.preindex = that.index++;
            }
            that.show();
        },this.config.time);
    }
}

export {Banner}